import { useGLTF } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useEffect, useRef } from 'react';
import { AnimationMixer, Clock } from 'three';

export default function Scene() {

    const { scene, animations } = useGLTF('/model.glb'); // 替换为你的模型路径

    const { gl } = useThree()


    useEffect(() => {
        const mixer = new AnimationMixer(scene)

        const clock = new Clock()

        for (const animation of animations) {
            const action = mixer.clipAction(animation)
            action.play()
        }

        const tick = () => {
            mixer.update(clock.getDelta())

        }

        gl.setAnimationLoop(tick)

        return () => {
            gl.setAnimationLoop(tick)
        }

    }, [animations, scene])

    return (
        <group>
            <primitive object={scene} scale={0.5} />
            <mesh visible={false}>
                <boxGeometry />
                <meshStandardMaterial color="blue" />
            </mesh>
        </group>
    )
}
